<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <base href="http://localhost:8080/bookstore/">
    <style>
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }
    </style>
</head>
<body>
<div id="app2">
    <template>
        <el-table
                :data="tableData"
                style="width: 100%"
                :row-class-name="tableRowClassName">
            <el-table-column
                    prop="book.name"
                    label="订单项目"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="book.price"
                    label="单价">
            </el-table-column>
            <el-table-column
                    prop="count"
                    label="数量">
            </el-table-column>
            <el-table-column
                    prop="totalPrice"
                    label="总价">
            </el-table-column>
            <el-table-column
                    label="支付">
                <el-button type="primary" @click="pay(book)">支付</el-button>
            </el-table-column>
        </el-table>
        <div>
            <el-row>
                总共有 <span style="color: red"> {{totalCount}}</span> 件商品，共<span style="color: red"> {{totalPrince}}</span>元
                ,结账：
                <el-button type="success" @click="checkout()" plain >全部支付</el-button>
            </el-row>
        </div>
    </template>
</div>
<link href="https:/cdn.staticfile.org/layui/2.8.0/css/layui.css" rel="stylesheet">
<script src="static/script/layui.js"></script>
<link rel="stylesheet" href="static/style/layui.css">
<script src="static/script/vue.js"></script>
<script src="static/script/axios-0.18.0.js"></script>
<link rel="stylesheet" href="static/style/bootstrap.min.css">
<link rel="stylesheet" href="static/style/purecss.css">
<link rel="stylesheet" href="static/style/prism.css">
<link rel="stylesheet" href="static/style/bulma.css">
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
<link rel="stylesheet" href="element-ui-2.13.0/lib/theme-chalk/index.css">
<script src="element-ui-2.13.0/lib/index.js"></script>
<script>
    new Vue({
        el:"#app2",
        data(){
            return{
                tableData: [],
                user:[]
            }
        },
        methods:{
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            //获取购物车
            getCart(){

              axios.post("CartServlet?action=getCart").then(response=>{
                  this.tableData=response.data
              })
            },
            //结账
            checkout(){
                var user=this.user;
                console.log(user)
                axios.post("OrderClientServlet?action=checkout",user).then(response=>{
                    this.getCart();
                })
            },
            getUser(){
                axios.post("UserServlet?action=getUser").then(response=>{
                    this.user=response.data;
                })
            },
            pay(value){
                console.log("123123131231312312")
                console.log(value);
            }
        },created(){
            this.getCart();
            this.getUser();
        }
    });
</script>
</body>
</html>